<template>
  <VCharts v-if="renderChart" :option="option" :autoresize="autoResize" :style="{ width, height }" />
</template>

<script setup>
const props = defineProps({
  名称: {
    type: String,
    default: ""
  },
  单项: {
    type: Object,
    default: {}
  },
  单项组: {
    type: Array,
    default: []
  },
  height: {
    type: String,
    default: '300px',
  },
  autoResize: {
    type: Boolean,
    default: true,
  },
  width: {
    type: String,
    default: '100%',
  },
})
import { ref, nextTick, reactive, watch, computed } from 'vue';
import VCharts from 'vue-echarts';

import { useWindowResize } from '@/hooks/use-windows-resize'

const renderChart = ref(false);
nextTick(() => {
  renderChart.value = true;
});
useWindowResize(() => {
  renderChart.value = false;
  nextTick(() => {
    renderChart.value = true;
  });
})
import * as util from '@/utils';

// 取消的话，没法mark point
import { graphic } from 'echarts'

const 名称 = ref(props.名称)
// watch(() => props.单项, (newValue, oldValue) => {
//   console.log(`单项变化 newValue 👉`,newValue)
//   // util.数组重予(单项组, props.单项组)
//   // // console.log(`单项组 👉`, 单项组)
//   // 予option()
// })

const option = computed(() => ({
  title: {
    text: 名称.value,
    left: 10,
    textStyle: {
      userSelect: true // 设置为 true 表示可以选中文字
    }
  },
  grid: {
    left: 16,
    right: 25,
    bottom: 10,
    top: 40,
    containLabel: true,
  },
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    data: props.单项.legend || [],
  },
  calculable: true,
  xAxis: [
    {
      type: 'category',
      axisLine: {
        lineStyle: {
          color: '#D7DDE4',
        },
      },
      axisTick: {
        alignWithLabel: true,
        lineStyle: {
          color: '#D7DDE4',
        },
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: '#F5F7F9',
        },
      },
      axisLabel: {
        interval: 0,
        rotate: 40,
        color: '#7F8B9C',
      },
      data: props.单项.xAxis || [],
    },
  ],
  yAxis: props.单项.yAxisData.length
    ? props.单项.yAxisData
    : {
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: '#7F8B9C',
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#F5F7F9',
        },
      },
      type: 'value',
    },
  series: props.单项.series || [],
}));


</script>
